<template>
    <div id="dialog">
        <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            width="60%"
            >
                <div class="form">

                    <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="菜单分类" prop="title">
                            <el-select v-model="FormData.pid" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="菜单ID" prop="title" v-if="DialogData.edit">
                            <el-input v-model="FormData.id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="title">
                            <el-input v-model="FormData.title"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单路由" prop="title">
                            <el-input v-model="FormData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单图标" prop="title">
                            <div class="up">
                                <div class="sltbox" v-if="FormData.pic && !icon ">
                                <img :src="FormData.pic" alt="">
                            </div>
                            <el-upload
                                    action="#"
                                    ref="upload"
                                    list-type="picture-card"
                                    :limit="limit"
                                    :on-change="uploadChange"
                                    :auto-upload="false">
                                        <i slot="default" class="el-icon-plus"></i>
                                        <div slot="file" slot-scope="{file}">
                                        <img
                                            class="el-upload-list__item-thumbnail"
                                            :src="file.url" alt=""
                                        >
                                        <span class="el-upload-list__item-actions">
                                            <span
                                            class="el-upload-list__item-preview"
                                            @click="handlePictureCardPreview(file)"
                                            >
                                            <i class="el-icon-zoom-in"></i>
                                            </span>
                                            <span
                                            v-if="!disabled"
                                            class="el-upload-list__item-delete"
                                            @click="handleDownload(file)"
                                            >
                                            <i class="el-icon-download"></i>
                                            </span>
                                            <span
                                            v-if="!disabled"
                                            class="el-upload-list__item-delete"
                                            @click="handleRemove(file)"
                                            >
                                            <i class="el-icon-delete"></i>
                                            </span>
                                        </span>
                                        </div>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                            </div>
                        </el-form-item>
                        <el-form-item label="菜单排序" prop="title">
                            <el-input v-model="FormData.sort"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单状态" prop="title">
                                <el-select v-model="FormData.status" placeholder="请选择">
                            <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                                </el-select>
                        </el-form-item>
                    </el-form>

                </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="DialogData.show = false">取 消</el-button>
                <el-button type="primary" @click="SubForm">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            DialogData: Object,
            FormData: Object,
        },
        data() {
            return {
                MenuList: [],
                options: [],
                status: [
                    { value: 1, label: "开启"},
                    { value: 2, label: "关闭"},
                ],
                limit: 1,
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                icon: "",
            }
        },
        computed: {
            token() {
                return localStorage.token;
            }
        },
        mounted() {
            this.getAllMenu()
        },
        methods: {
            // 获取所有菜单
            async getAllMenu() {
                let arr = []
                let res =await this.$axios.post("/admin/role/menu_module_show", { token: this.token })
                // console.log(res);
                if(res.data.code == 200) {
                    this.MenuList = res.data.data
                    this.MenuList.forEach( el => {
                        if (el.pid == 0) {
                            arr.push({
                                value: el.id,
                                label: el.title
                            })
                        }
                    })
                }
                // console.log(arr);
                arr.unshift({
                    value: 0,
                    label: "一级菜单"
                })
                this.options = arr
            },
            // 提交添加或修改
            async  SubForm() {
                this.FormData.token = this.token
                let fd = this.FormData
                let newData = new FormData()
                if(this.DialogData.edit) {
                    newData.append("id", fd.id)
                }
                if (this.icon) {
                    newData.append("have", "1")
                } else {
                    newData.append("have", "2")
                }
                newData.append("pid", fd.pid)
                newData.append("name", fd.name)
                newData.append("title", fd.title)
                newData.append("pic",  this.icon)
                newData.append("status", fd.status)
                newData.append("token", fd.token)
                let res = await this.$axios.post("/admin/role/menu_module_alter", newData)
                // console.log(res);
                if(res.data.code == 204 || res.data.code == 202) {
                    this.$message.success("更新成功")
                    this.$emit("update")
                    this.DialogData.show = false
                } else {
                    this.$message.success("更新失败")
                    this.$emit("update")
                    this.DialogData.show = false
                }
            },
            // 上传图片变化
            uploadChange( e ) {
                console.log(e);
                this.icon = e.raw
            },
             handleRemove(file) {
                console.log(file);
                this.$refs.upload.clearFiles();
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
        }
    }
</script>

<style lang="scss" scoped>
.sltbox {
    width: 148px;
    height: 148px;
    margin: 0 10px;
    img {
        width: 148px;
        height: 148px;
    }
}
.up {
    width: 100%;
    display: flex;
}
</style>